import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {
    Row, Col, Card, Form, Input,
    Select, Icon, Button, Dropdown, Menu,
    InputNumber, DatePicker, Modal, message,
    Badge, Divider, Tag, Table
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Link } from 'dva/router';
import styles from './ProductCatalog.less';

const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker, RangePicker } = DatePicker;
/*
  产品管理的产品添加
*/

@connect(({ product }) => ({
    product,
}))
@Form.create()
export default class ProductList extends PureComponent {
    state = {

    };
    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'product/fetchProduct',
            payload: { offset: 0, limit: 10, openState: 0 },
        });
    }

    columns = [{
        title: '产品编号',
        dataIndex: 'productNum',
        key: 'productNum',
    }, {
        title: '产品名称',
        dataIndex: 'productName',
        key: 'productName',
    }, {
        title: '合作银行',
        dataIndex: 'bankName',
        key: 'bankName',
    }, {
        title: '操作',
        dataIndex: 'id',
        // key: 'id',
        render: (text, record) => (
            <Fragment>
                <Link to={`/product/product-details?id=${record.id}&type=${3}`}>开通</Link>
            </Fragment>
        ),
    }];

    render() {
        const { dispatch } = this.props;
        const { product: { productList, productLoading, productPage } } = this.props;
        const { getFieldDecorator } = this.props.form;

        const onValidateForm = () => {
            dispatch(routerRedux.push('/product/product-add'));
        };

        return (
            <div>
                <Modal
                    visible={this.state.modal1Visible}
                    onOk={() => this.setModal1Visible(false)}
                    onCancel={() => this.setModal1Visible(false)}>
                    <PageHeaderLayout title="产品开通">
                        <Card bordered={false}>
                            <div className={styles.tableList}>
                                {/* <div className={styles.tableListOperator}>
                            <Button icon="plus" type="primary" onClick={onValidateForm}>
                                新增
                            </Button>
                        </div> */}

                                <Table
                                    dataSource={productList}
                                    columns={this.columns}
                                    rowKey="key"
                                    pagination={productPage}
                                    loading={productLoading}
                                    onChange={this.handleStandardTableChange}
                                />
                            </div>
                        </Card>
                    </PageHeaderLayout>
                </Modal>
            </div>
        );
    }
}